<!--
    首页
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div
      // 轮播图
      div.slideshow
        slider(:slides="slides" :time="invTime")
        <!--img(src="/static/index/banner_u271.jpg")-->
      div.content
        // 新闻公告
        div
          div.news
            div.newsT
              span.newsColor 新闻
              span.newsColorb 公告
            div.xian
              div.jiao
              div.jiaoA
            div.xuxian
          div.newsTitle.clearfix
            div.newsLeft
              router-link(:to="{name: 'News',query:{newsId:111}}")
                img(src="/static/index/u261.png")
            div.newsRight
              div(v-for="(item, index) in newsList" v-if="index<4")
                div.newsDate
                  b {{item.creationDate}}
                  span April
                div.newsBt
                  router-link(:to="{name: 'News',query:{news: item}}")
                    span.biaoti {{item.newTitle}}
                    div.character {{item.newDetails}}
        div
          // 课程排行
          div.news
            div.newsT
              span.newsColor 课程
              span.newsColorb 排行
            div.newsA
              span.newsColor 课程
              span.newsColorb 排行
            div.xian
              div.jiao
              div.jiaoA
            div.xuxian
          div.course
            div.courseLeft
              ul
                li(v-for="(item, index) in ranking")
                  div.figure {{index + 1 }}
                  <!--div.figure {{}}-->
                  router-link(:to="{name: 'index'}" :title="item.name").connect {{item.name}}
                  span.teacher {{item.uname}}
                  span.play {{item.plays}}
            div.courseRight
              div.hot(v-for="(item, index) in ranking" v-if="index < 6")
                router-link(:to="{name: 'VideoPage',query:{course: item}}")
                  img(:src="item.photo")
                router-link(:to="{name: 'VideoPage',query:{course: item}}" :title="item.name").hotName {{item.name}}
                router-link(:to="{name: 'VideoPage',query:{course: item}}" :title="item.introduction").hotBiref {{item.introduction}}
        div
          // 推荐课程
          div.news
            div.newsT
              span.newsColor 推荐
              span.newsColorb 课程
            div.xian
              div.jiao
              div.jiaoA
            div.xuxian
          div.recommend
            div.recommendL
              div.hot(v-for="item in LhotCourse")
                router-link(:to="{name: 'index'}")
                  img(:src="item.photo")
                router-link(:to="{name: 'cname'}").hotName {{item.cname}}
                router-link(:to="{name: 'introduction'}").hotBiref {{item.introduction}}
                <!--p.recommendLS 111111111111111111111111111-->
            div.recommendR
              div.hot(v-for="item in hotCourse")
                router-link(:to="{name: 'index'}")
                  img(:src="item.photo")
                router-link(:to="{name: 'cname'}").hotName {{item.cname}}
                router-link(:to="{name: 'introduction'}").hotBiref {{item.introduction}}
        div
          // 推荐教师
          div.news
            div.newsT
              span.newsColor 推荐
              span.newsColorb 教师
            div.newsA
              span.newsColor 热门
              span.newsColorb 教师
            div.xian
              div.jiao
              div.jiaoA
            div.xuxian
          div.liveTeacher
            div.liveLeft
              div.tjTeacher(v-for="item in referrer")
                router-link(v-bind:to="{name: 'Teacher'}")
                  img(:src="item.img").tjImg
                  div.tjRight
                    div.jiaoshi {{item.teacher}}
                    div.jiaoshi {{item.renqi}}
            div.liveRight
              <!--LiveVideo(width="569px" height="458px")-->
              img(src="/static/index/u43.png" width="569px" height="458px")
              div.zhubo
                div.tjTeacher(v-for="item in referrers")
                  router-link(v-bind:to ="{name:'LiveMore',params: {name:item}}")
                    img(:src="item.img").tjImg
                    div.tjRight
                      div.jiaoshi {{item.teacher}}
                      div.jiaoshi {{item.renqi}}
</template>

<script>
  import Login from '../../api/login'

  export default {
    data() {
      return {
        serial: 1,
        invTime: 5000,
        slides: [
          // '/static/index/u118.png',
          // '/static/index/u126.png',
          // '/static/index/u122.png',
          // '/static/index/u124.png'
        ],
        newsList: [],
        ranking: [],
        hotCourse: [
          {
            hotImg: '/static/index/u140.png',
            hotName: '课程名称',
            hotBiref: '课程简介123'
          },
          {
            hotImg: '/static/index/u142.png',
            hotName: '课程名称',
            hotBiref: '课程简介'
          },
          {
            hotImg: '/static/index/u144.png',
            hotName: '课程名称',
            hotBiref: '课程简介2222'
          },
          {
            hotImg: '/static/index/u146.png',
            hotName: '课程名称',
            hotBiref: '课程简介3333'
          },
          {
            hotImg: '/static/index/u148.png',
            hotName: '课程名称',
            hotBiref: '课程简介444'
          },
          {
            hotImg: '/static/index/u150.png',
            hotName: '课程名称',
            hotBiref: '课程简介'
          }
        ],
        LhotCourse: [
          {
            hotImg: '/static/index/u140.png',
            hotName: '课程名称',
            hotBiref: '课程简介123'
          }
        ],
        referrer: [
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          },
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          },
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          },
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          },
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          },
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          },
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          },
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气111'
          },
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          },
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          }
        ],
        referrers: [
          {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          }, {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          }, {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          }, {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          }, {
            img: '/static/index/u41.png',
            teacher: '授课教师',
            renqi: '人气'
          }
        ]
      }
    },
    mounted() {
      this.autoLogin()
    },
    methods: {
      getData() {
        this.newsList.forEach(item => {
          item.creationDate = item.creationDate.match(/\d{2}(?=\s)/g).toString()
          // item.creationDate.toString()
        })
      },
      autoLogin() {
        let username = 'admin'
        let password = '123'
        Login.remoteLogin({
          'username': username,
          'password': password
        }).then(data => {
          if (data.success) {
            // callBack()
            // window.sessionStorage.setItem('access_token', data.access_token)
            // this.setAccessToken(data.access_token)
            window.sessionStorage.setItem('access_token', data.access_token)
            window.sessionStorage.setItem('user_token', data.user.token)
            // 在缓存中记录最后登录时间，处理单用户登录需求
            // let now = new Date().getTime()
            // this.$KalixCatch._saveLocal('lastLoginTime', now)
            // this.$KalixCatch.save('lastLoginTime', now)
            this.getPicture()
            this.getNews()
            this.getcurriculum()
            this.getcurriculums()
            this.gethotCourse()
            this.getLhotCourse()
          } else {
            // this.$KalixMessage.error(data.message)
          }
        }).catch(err => {
          console.log('err', err)
        })
      },
      getPicture() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/imgs',
          params: {
            'jsonStr': {'type': '首页'}
          }
        }).then(res => {
          console.log('aaaaaa', res.data)
          this.slides = res.data.data[0].imgUrl.split(',')
        })
      },
      getNews() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/newss'
        }).then(res => {
          console.log('aaaaaa', res.data)
          this.newsList = res.data.data
          console.log('res', res)
          console.log('this.newsList----------------', this.newsList)
          console.log('res.id--------------------------', res.data.data.id)
          console.log('222222222222222222222222222222222', this.formModel)
          var bbb = this.newsList.creationDate
          console.log('bbb', bbb)
          console.log('this.newsList', this.newsList)
          this.getData()
        })
      },
      getcurriculum() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/courses/getAllCourse'
        }).then(res => {
          this.ranking = res.data.data
          console.log('res', res)
          console.log('res.id--------------------------', res.data.data.id)
          console.log('33333333333333333333333333333', this.ranking)
        })
      },
      getcurriculums() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/courses/getAllCourse'
        }).then(res => {
          this.CourseRanking = res.data.data
        })
      },
      gethotCourse() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/hotlistsCourses/getAllHotlistsCourse'
        }).then(res => {
          this.hotCourse = res.data.data
        })
      },
      getLhotCourse() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/hotlistsCourses/getAllLHotlistsCourse'
        }).then(res => {
          this.LhotCourse = res.data.data
        })
      },
      dataFormat(val) {
        let d = new Date(val)
        return this.$M_FormatDate(d, 'yyyy-MM-dd')
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .slideshow
    width 100%
    height 500px

  .content
    width 1200px
    margin 0 auto

  .newsT
    display inline-block
    font-size 28px
    margin-top 38px
    margin-bottom 6px

  .newsA
    display inline-block
    font-size 28px
    margin-top 16px
    margin-left 335px

  .newsColor
    color #FF9933

  .newsColorb
    color #666666

  .xian
    height 2px
    background-color #000
    position relative
    .jiao
      position absolute
      top 0
      left 155px
      border-top 8px solid #000
      border-left 8px solid transparent
      border-right 8px solid transparent
      border-bottom 8px solid transparent
      z-index 999
    .jiaoA
      width 43px
      height 10px
      position absolute
      left 143px
      top 4px
      background-color #fff

  .xuxian
    border-top: 3px #c0c0c0 dashed
    margin-top 5px

  .newsTitle
    margin-top 20px
    width 100%

  .newsLeft
    float left
    width 600px
    height 400px
    img
      width 100%
      height 100%

  .newsRight
    float right
    display flex
    width 570px
    height 400px
    flex-direction column
    justify-content space-between
    .newsDate
      float left
      width 80px
      height 80px
      background-color #E4E4E4
      text-align center
      padding-top 20px
      box-sizing border-box
      margin-right 18px
      b
        color #FF9933
        font-size 26px
      span
        display block
        color #999999
    .newsBt
      width 472px
      height 80px
      float right
      .biaoti
        font-size 18px
        font-weight 700
        color #000
      .biaoti:hover
        text-decoration: underline
      .character
        width 420px
        height 40px
        line-height 22px
        margin-top 10px
        font-size 14px
        color #999999 /*word-break break-all !* 不换行 *!
        white-space wrap !* 不换行 *!
        overflow hidden !* 内容超出宽度时隐藏超出部分的内容 *!
        text-overflow ellipsis*/
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-box-orient vertical
        -webkit-line-clamp 2
      .character:hover
        text-decoration: underline

  .course
    width 100%
    height 420px
    margin-top 32px
    .courseLeft
      width 420px
      height 420px
      float left
      font-size 17px
      ul
        height 100%
        display flex
        flex-direction column
        justify-content space-between
      .figure
        display inline-block
        width 30px
        height 30px
        line-height 30px
        background-color #FF9933
        text-align center
        border-radius 5px
        color #fff
      .connect
        margin-left 10px
        display inline-block
        width 150px
        color #999999
        word-break keep-all /* 不换行 */
        white-space nowrap /* 不换行 */
        overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow ellipsis
      .teacher
        display inline-block
        width 130px
        text-align center
        color #999999
      .play
        display inline-block
        width 100px
        text-align center
        color #999999

  .courseRight
    width 758px
    height 420px
    float right
    display flex
    flex-direction column
    justify-content space-between
    flex-wrap wrap

  .hot
    width 240px
    height 200px
    img
      width 240px
      height 150px

  .hotName
    width 100%
    display block
    font-weight 700
    font-size 18px
    margin 6px 0
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .hotName:hover
    text-decoration: underline
    color #FF9933

  .hotBiref
    width 100%
    display block
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .hotBiref:hover
    text-decoration: underline
    color #FF9933

  .recommend
    width 100%
    height 420px
    margin-top 25px
    .recommendL
      float left
      width 417px
      height 100%
      img
        width 417px
        height 317px
      .recommendLN
        display block
        width 100%
        font-size 18px
        font-weight 700
        margin 10px 0
      .recommendLJ
        width 417px
        font-size 18px
        /*font-weight 700*/
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-box-orient vertical
        -webkit-line-clamp 2
        line-height 30px
    /*.recommendLS
      display inline-block
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 2*/

    .recommendR
      width 758px
      height 420px
      float right
      display flex
      flex-direction column
      justify-content space-between
      flex-wrap wrap

  .liveTeacher
    width 100%
    height 460px
    margin-top 28px
    .liveLeft
      float left
      width 417px
      height 100%
      display flex
      flex-wrap wrap
      justify-content space-around
      align-content space-around
    .liveRight
      float right
      width 758px
      height 100%

  .tjTeacher
    width 180px
    height 60px
    .tjImg
      float left
      width 60px
      height 60px
    .tjRight
      width 100px
      height 60px
      float right
      font-size 14
      .jiaoshi
        margin 10px 0
        width 100%
        word-break keep-all /* 不换行 */
        white-space nowrap /* 不换行 */
        overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow ellipsis

  .zhubo
    width 170px
    height 100%
    float right
    display flex
    justify-content space-between
    flex-direction column

</style>
